/*svg-car-animation.css*/

.firstContainer {
	position: relative;
	width: 90%;
	margin: 5%;
}

.svg-car {
	position: absolute;
	left: -10%; 
	bottom: 8%; 
	width: 10%;
	transform: translate3d(0, 0, 0);
	transform: translateZ(0);
	opacity: 0;
}

.svg-car-1 {
	-webkit-animation-name: svg-car-go;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
}
.svg-car-2 {
	-webkit-animation-name: svg-car-go;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: .1s;
}
.svg-car-3 {
	-webkit-animation-name: svg-car-go;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: .2s;
}
.svg-car-4 {
	-webkit-animation-name: svg-car-go;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: .3s;
}
.svg-car-5 {
	-webkit-animation-name: svg-car-go;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: .4s;
}
.svg-car-6 {
	-webkit-animation-name: svg-car-go;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: .5s;
}
.svg-car-7 {
	-webkit-animation-name: svg-car-go;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: .6s;
}
.svg-car-8 {
	-webkit-animation-name: svg-car-go;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: .7s;
}
.svg-car-9 {
	-webkit-animation-name: svg-car-go;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: .8s;
}
.svg-car-10 {
	-webkit-animation-name: svg-car-go;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: .9s;
}
.svg-car-11 {
	-webkit-animation-name: svg-car-go;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 1s;
}
.svg-car-12 {
	-webkit-animation-name: svg-car-go;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 1.1s;
}

@-webkit-keyframes svg-car-go {
	0% {
		left: -10%;
		transform: translateZ(0);
		-webkit-transform: rotate(0deg);
		-webkit-transform-origin: 50% -300%;
		opacity: 0;
	}
	24% {
		opacity: 1;
		left: 45%; 
transform: translateZ(0);
		-webkit-transform: rotate(0deg);
		-webkit-transform-origin: 50% -300%;
	} 80% {
		left: 45%; transform: translateZ(0);
		-webkit-transform: rotate(-360deg);
		-webkit-transform-origin: 50% -300%;
		opacity: 1;
	} 100% {
		left: 90%; transform: translateZ(0);
		-webkit-transform: rotate(-360deg);
		-webkit-transform-origin: 50% -300%;
		opacity: 0;
		display: none;
	}
}
